﻿@model List<ThinkingHome.NooLite.Web.Models.ControlPageModel>
<!-- Start of first page -->
<div data-role="page" id="main-page">

	<div data-role="header" data-position="fixed">
		<h1>@ViewBag.Title</h1>
		<a href="#options-page" class="ui-btn-right">Options</a>
	</div>
	<!-- /header -->

	<div data-role="content">
		<ul data-role="listview">
			@foreach (var page in Model)
   {
				<li><a href="#@page.Id">@page.Title</a></li>
   }
		</ul>

	</div>
	<!-- /content -->
</div>
<!-- /page -->

<!-- Start of options page -->
<div data-role="page" id="options-page">

	<div data-role="header" data-position="fixed">
		<a href="#main-page" data-icon="home">Home</a>
		<h1>Options</h1>
	</div>
	<!-- /header -->

	<div data-role="content">
		<label for="select-channel" class="select">Select channel</label>
		<select name="select-channel" id="select-channel" data-theme="d">
			@for (int i = 0; i < 32; i++)
   {
				<option value="@i">Channel #@i</option>
   }
		</select>
		<div class="ui-grid-a responsive-slider">
			<div class="ui-block-a">
				<input type="button" class="options-button" data-cmd-name="bind" value="Bind" />
			</div>
			<div class="ui-block-b">
				<input type="button" class="options-button" data-cmd-name="unbind" value="Unbind" />
			</div>
		</div>
	</div>
	<!-- /content -->
</div>
<!-- /page -->

<!-- Other pages -->
@foreach (var page in Model)
{
	<div data-role="page" id="@page.Id">

		<div data-role="header" data-position="fixed">
			<a href="#main-page" data-icon="home">Home</a>
			<h1>@page.Title</h1>
			<a href="#options-page" class="ui-btn-right">Options</a>
		</div>
		<!-- /header -->

		<div data-role="content">

			@if (!string.IsNullOrWhiteSpace(page.Description))
   {
				<p>@page.Description</p>
   }

			@foreach (var control in page.Controls)
   {
				<div class="control-group">

					@Html.Partial(control.TemplateName, control)
				</div>
   }
		</div>
		<!-- /content -->
	</div>
	<!-- /page -->
}

<script type="text/javascript">

	function showRequestResult(data) {

		if ($.isArray(data)) {

			var message = '';

			for (var i = 0; i < data.length; i++) {

				if (message) {
					message += '\r\n';
				}

				message += data[i];
			}

			if (message) {
				alert(message);
			}
		}
	}

	$(function () {

		$.ajaxSetup({ cache: false });

		$('.control-button').on('click', function () {

			// params
			var pageId = $(this).closest('[data-role=page]').attr('id');
			var controlId = $(this).data('control-id');
			var strong = !!$(this).data('strong');

			// level
			var level = $(this).data('level') + '';
			var levelControl = $(level);
			if (levelControl.length) {
				level = levelControl.val();
			}

			// request
			var url = '@Url.Action("Command", "Home")';
			$.getJSON(url, { page: pageId, control: controlId, level: level, strong: strong }, showRequestResult);
		});

		$('.options-button').on('click', function () {

			// params
			var cmd = $(this).data('cmd-name');
			var channel = $('#select-channel').val();

			// request
			var url = '@Url.Action("OptionsCommand", "Home")';
			$.getJSON(url, { commandName: cmd, channel: channel }, showRequestResult);
		});

	});

</script>
